<template>
  <div class="trafficDetector" v-loading="loading">
    <div class="top">
      <div class="lefttop">
          <div class="title">{{$t('openatc.devicemanager.trafficFlowStatistic')}}</div>
          <div class="select">
            <el-select v-model="curDetectorName"
                       size="mini"
                       @change="onDetectorChange">
              <el-option v-for="item in historySelectOption"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="choosePanel">
            <span v-for="(item, index) in chooseButtons"
                  :key="index">
              <span v-on:click="()=>updateStrengthChart(item.key)"
                    class="btn"
                    :class="{'btnFocus': item.active === true}">{{item.value}}</span>
            </span>
          </div>
          <div class="chart1"
               id="historyData"></div>
      </div>
    </div>
    <div class="bottom">
      <div class="bottom-left">
        <div class="title">
          {{$t(`openatc.devicemanager.detectorFlowStatistics`)}}
        </div>
        <div class="choosePanel">
        </div>
        <div class="chart2"
              id="heatmap"></div>
      </div>
      <div class="bottom-right">
        <div class="title">
          {{$t(`openatc.devicemanager.detectorFlow`)}}
        </div>
          <div class="chartright"
               id="strengthHeatMap"></div>
      </div>
    </div>
  </div>
</template>
<script>
import echart from 'echarts'
import { getAllTrafficData } from '@/api/device'
import { getMessageByCode } from '@/utils/responseMessage'
import { getTheme } from '@/utils/auth'
import moment from 'moment'
export default {
  name: 'trafficDetector',
  props: {
    date: {
      type: Array
    },
    curascid: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      chooseButtons: [
        {
          key: 'flowStatistics',
          value: this.$t('openatc.devicemanager.flowStatistics'),
          active: true
        },
        {
          key: 'occupyrateStatistics',
          value: this.$t('openatc.devicemanager.occupyrateStatistics'),
          active: false
        }
      ],
      curChart: {
        key: 'flowStatistics',
        value: this.$t('openatc.devicemanager.flowStatistics')
      },
      ascid: '',
      loading: false,
      valueTypeList: [this.$t(`openatc.devicemanager.largeVehicle`), this.$t(`openatc.devicemanager.middleVehicle`), this.$t(`openatc.devicemanager.smallVehicle`)],
      heatmapColorList: [
        '#0064be',
        '#0874d4',
        '#4c9ee6',
        '#a4d0f7',
        '#cee3f6'
      ],
      heatmapValueType: 0,
      curDetectorName: 1,
      historySelectOption: [],
      curHistoryData: {},
      curHeatMapData: [],
      maxValueList: [],
      Color: new Map([[this.$t(`openatc.devicemanager.largeVehicle`), '#007dc5'], [this.$t(`openatc.devicemanager.middleVehicle`), '#7953b1'], [this.$t(`openatc.devicemanager.smallVehicle`), '#cf6543']]),
      defalultOpention2: {
        backgroundColor: getTheme() === 'light' ? '#FFFFFF' : '#202940',
        grid: {
          containLabel: true,
          height: '80%',
          width: '95%',
          left: '18',
          bottom: '20'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          left: 'middle',
          textStyle: {
            color: getTheme() === 'light' ? '#666666' : '#B9BABF'
          },
          data: []
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            textStyle: {
              color: getTheme() === 'light' ? '#666666' : '#B9BABF'
            }
          },
          axisTick: {
            lineStyle: {
              color: getTheme() === 'light' ? '#D7DFE1' : '#30384D'
            }
          },
          axisLine: {
            lineStyle: {
              color: getTheme() === 'light' ? '#D7DFE1' : '#30384D'
            }
          },
          data: []
        },
        yAxis: {
          axisTick: {
            lineStyle: {
              color: getTheme() === 'light' ? '#D7DFE1' : '#30384D'
            }
          },
          axisLine: {
            lineStyle: {
              color: getTheme() === 'light' ? '#D7DFE1' : '#30384D'
            }
          },
          splitLine: {
            lineStyle: {
              color: getTheme() === 'light' ? '#DCDFE6' : '#30384d'
            }
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: getTheme() === 'light' ? ['#fafafa', '#fff'] : ['#202940', '#1a2338']
            }
          },
          axisLabel: {
            textStyle: {
              color: getTheme() === 'light' ? '#666666' : '#B9BABF'
            }
          }
        },
        series: []
      },
      defalultOpention3: {
        backgroundColor: getTheme() === 'light' ? '#FFFFFF' : '#202940',
        color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
        // title: {
        //   text: 'Gradient Stacked Area Chart'
        // },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            boundaryGap: false,
            axisLabel: {
              textStyle: {
                color: getTheme() === 'light' ? '#666666' : '#B9BABF'
              },
              formatter: function (value, index) { // 坐标轴文字展示样式处理
              // return echart.format.formatTime('yyyy-MM-dd hh:mm:ss', value)
                return echart.format.formatTime('MM-dd hh:mm:ss', value)
              }
            },
            axisTick: {
              lineStyle: {
                color: getTheme() === 'light' ? '#D7DFE1' : '#30384D'
              }
            },
            axisLine: {
              lineStyle: {
                color: getTheme() === 'light' ? '#D7DFE1' : '#30384D'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisTick: {
              lineStyle: {
                color: getTheme() === 'light' ? '#D7DFE1' : '#30384D'
              }
            },
            axisLine: {
              lineStyle: {
                color: getTheme() === 'light' ? '#D7DFE1' : '#30384D'
              }
            },
            splitLine: {
              lineStyle: {
                color: getTheme() === 'light' ? '#DCDFE6' : '#30384d'
              }
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: getTheme() === 'light' ? ['#fafafa', '#fff'] : ['#202940', '#1a2338']
              }
            },
            axisLabel: {
              textStyle: {
                color: getTheme() === 'light' ? '#666666' : '#B9BABF'
              }
            }
          }
        ],
        series: [
          {
            name: 'Line 1',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            // itemStyle: {
            //   normal: {
            //     color: 'red', // 图例的颜色
            //     lineStyle: {
            //       color: 'red'// 线的颜色
            //     }
            //   }
            // },
            areaStyle: {
              opacity: 0.8,
              color: new echart.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(128, 255, 165)'
                },
                {
                  offset: 1,
                  color: 'rgb(1, 191, 236)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: [140, 232, 101, 264, 90, 340, 250]
          },
          {
            name: 'Line 2',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echart.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(0, 221, 255)'
                },
                {
                  offset: 1,
                  color: 'rgb(77, 119, 255)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: [120, 282, 111, 234, 220, 340, 310]
          }
        ]
      }
    }
  },
  mounted () {
    this.initChart()
    this.ascid = this.curascid
    this.refreshChart(this.curascid)
  },
  methods: {
    onDetectorChange () {
      let key = this.curChart.key
      if (key === 'flowStatistics') {
        this.refreshHistoryDataChart()
      } else {
        this.updateStrengthChart(key)
      }
    },
    changeBtnStyle (key) {
      // 选中按钮高亮
      this.chooseButtons.forEach(button => {
        button.active = false
        if (button.key === key) {
          button.active = true
        }
      })
    },
    updateStrengthChart (key) {
      this.changeBtnStyle(key)
      // 更新相位分布环图小标题
      this.curChart = this.chooseButtons.filter(btn => btn.key === key)[0]
      this.renderStrengthChart(key)
    },
    renderStrengthChart (key) {
      // 渲染
      if (key === 'flowStatistics') {
        this.refreshHistoryDataChart()
        return false
      }
      let opention2 = JSON.parse(JSON.stringify(this.defalultOpention3))
      let list = []
      if (this.data && this.data.length > 0) {
        list = this.data.filter(item => item.id === this.curDetectorName)
      }
      this.resetStrengthOption(opention2, list, key)
      this.historyChart.clear()
      this.historyChart.setOption(opention2)
    },
    resetStrengthOption (opention2, alldata, key) {
      let legendData = []
      let xAxisData = []
      let seriesData0 = []
      let seriesData1 = []
      let name0 = this.$t('openatc.devicemanager.toatalUsage')
      let name1 = this.$t('openatc.devicemanager.greenusage')
      if (key === 'flowStatistics') {
        opention2.legend.data = this.valueTypeList
        opention2.xAxis.data = this.getXAxis(this.data)
        opention2.series = this.getHistoryDataSeries(this.data)
        return opention2
      }
      for (let data of alldata) {
        let xdata = data.time
        let sdata0 = data.occupyrate ? data.occupyrate : 0
        let sdata1 = data.greenusage ? data.greenusage : 0
        if (key === 'saturationStatistics') {
          sdata0 = data.saturation
          sdata1 = data.occupyrate
        }
        xAxisData.push(xdata)
        seriesData0.push(sdata0)
        seriesData1.push(sdata1)
      }
      legendData = [name0, name1]
      opention2.legend.data = legendData
      opention2.xAxis[0].data = xAxisData
      opention2.series[0].data = seriesData0
      opention2.series[1].data = seriesData1
      opention2.series[0].name = name0
      opention2.series[1].name = name1
    },
    initChart () {
      this.initHistoryDataChart()
      this.initHeatMapChart()
      this.initStrengthChart()
      const _this = this
      window.onresize = function () {
        _this.historyChart.resize()
        _this.heatmapChart.resize()
        _this.radarChart.resize()
        _this.strengthChart.resize()
      }
    },
    initHistoryDataChart () {
      this.historyChart = echart.init(document.getElementById('historyData'), getTheme())
    },
    initHeatMapChart () {
      this.heatmapChart = echart.init(document.getElementById('heatmap'), getTheme())
      this.heatmapChart.on('mouseover', event => {
        let index = event.value[0]
        let date = this.getXAxis(this.data)[index]
        this.onHeatMapUpdate(date)
      })
    },
    initStrengthChart () {
      this.strengthChart = echart.init(document.getElementById('strengthHeatMap'), getTheme())
    },
    lockScreen () {
      this.loading = true
    },
    unlockScreen () {
      this.loading = false
    },
    makeSelectOption (data) {
      this.historySelectOption = this.detectorIdList.map(item => {
        return {
          label: this.$t(`openatc.devicemanager.detector`) + item,
          value: item
        }
      })
    },
    filterCurDetector (data) {
      let res
      res = data.filter(item => {
        return item.id === this.curDetectorName
      })
      return res
    },
    async refreshChart (ascId) {
      this.ascid = ascId
      // this.lockScreen()
      this.data = await this.GetData()
      if (!this.data || this.data.length === 0) {
        return false
      }
      this.initDetectorList(this.data)
      this.makeSelectOption(this.data)
      this.refreshHistoryDataChart()
      this.refreshHeatMapChart()
      // this.unlockScreen()
    },
    refreshHistoryDataChart () {
      if (this.data.length === 0) {
        return
      }
      let option = JSON.parse(JSON.stringify(this.defalultOpention2))
      option.legend.data = this.valueTypeList
      option.xAxis.data = this.getXAxis(this.data)
      option.series = this.getHistoryDataSeries(this.data)
      this.historyChart.clear()
      this.historyChart.setOption(option)
    },
    getXAxis (data) {
      let res = []
      if (data === undefined) return res
      res = [...new Set(data.map(item => {
        return item.date
      }))]
      return res
    },
    getHistoryDataSeries (data) {
      let series = []
      let dataList = this.filterCurDetector(data)
      for (let valueIndex = 0; valueIndex < this.valueTypeList.length; ++valueIndex) {
        let seriesInfo = {
          name: '',
          type: 'line',
          smooth: true,
          // yAxisIndex: valueIndex === 0 || valueIndex === 3 ? 1 : 0,
          lineStyle: {
            width: '1'
          },
          itemStyle: {
            color: ''
          },
          data: []
        }
        seriesInfo.name = this.valueTypeList[valueIndex]
        seriesInfo.itemStyle.color = this.Color.get(this.valueTypeList[valueIndex])
        seriesInfo.data = dataList.map(item => {
          let keys = ['largevehnum', 'middlevehnum', 'smallvehnum']
          let key = keys[valueIndex]
          return item[key]
        })
        series.push(seriesInfo)
      }
      return series
    },
    refreshHeatMapChart () {
      if (this.data.length === 0) {
        this.heatmapChart.clear()
        return
      }
      let hours = []
      let days = []
      let data = []
      days = this.historySelectOption.map(item => item.label)
      data = []
      hours = new Set(this.data.map(item => item.date))
      hours = Array.from(hours)
      let min = 999999999
      let max = 0
      // let i = 0
      for (let item of this.data) {
        // i++
        let yName = this.$t(`openatc.devicemanager.detector`) + item.id
        let xName = item.date
        let y = days.indexOf(yName)
        let x = hours.indexOf(xName)
        // let v = item.smallvehnum + i
        let v = item.smallvehnum
        let rec = [y, x, v]
        data.push(rec)
        min = v < min ? v : min
        max = v > max ? v : max
      }
      data = data.map(function (item) {
        return [item[1], item[0], item[2] || '-']
      })
      let option = {
        backgroundColor: getTheme() === 'light' ? '#FFFFFF' : '#202940',
        tooltip: {
          position: 'top'
        },
        grid: {
          height: '50%',
          top: '10%'
        },
        xAxis: {
          type: 'category',
          data: hours,
          axisLabel: {
            textStyle: {
              color: getTheme() === 'light' ? '#666666' : '#B9BABF'
            }
          },
          axisTick: {
            lineStyle: {
              color: getTheme() === 'light' ? '#D7DFE1' : '#30384D'
            }
          },
          axisLine: {
            lineStyle: {
              color: getTheme() === 'light' ? '#D7DFE1' : '#30384D'
            }
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: getTheme() === 'light' ? ['#fafafa', '#fff'] : ['#202940', '#1a2338']
            }
          }
        },
        yAxis: {
          type: 'category',
          data: days,
          axisTick: {
            lineStyle: {
              color: getTheme() === 'light' ? '#D7DFE1' : '#30384D'
            }
          },
          axisLine: {
            lineStyle: {
              color: getTheme() === 'light' ? '#D7DFE1' : '#30384D'
            }
          },
          splitLine: {
            lineStyle: {
              color: getTheme() === 'light' ? '#DCDFE6' : '#30384d'
            }
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: getTheme() === 'light' ? ['#fafafa', '#fff'] : ['#202940', '#1a2338']
            }
          },
          axisLabel: {
            textStyle: {
              color: getTheme() === 'light' ? '#666666' : '#B9BABF'
            }
          }
        },
        visualMap: {
          min: min,
          max: max,
          calculable: true,
          orient: 'horizontal',
          left: 'center',
          bottom: '15%'
        },
        series: [
          {
            name: 'Small Vehicle',
            type: 'heatmap',
            data: data,
            label: {
              show: true
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      this.heatmapChart.setOption(option)
      this.onHeatMapUpdate(hours[0])
    },
    getValueLeave (typeIndex, value) {
      let mask = this.maxValueList[typeIndex] / 5
      return Math.floor(value / mask)
    },
    initDetectorList (data) {
      if (data && data.length > 0) {
        this.detectorIdList = this.getDetectorList(data)
        this.idMap = new Map()
        for (let index = 0; index < this.detectorIdList.length; ++index) {
          this.idMap.set(this.detectorIdList[index], index)
        }
      }
    },
    getDetectorList (data) {
      let detectorIdList = [...new Set(data.map(item => { return item.id }))]
      return detectorIdList
    },
    getHeatMapSeries (data) {
      if (data === undefined) return []
      let dataList = data.map(item => {
        let leavel = this.getValueLeave(this.heatmapValueType, item.value[this.heatmapValueType])
        return {
          name: item.name + ' ' + item.date,
          value: [item.date, this.idMap.get(item.name), leavel]
        }
      })
      return [{
        type: 'heatmap',
        data: dataList,
        // label: {
        // normal: {
        //  show: true  //这里设置格子上面是否要显示数据
        // }
        // },
        itemStyle: {
          borderWidth: 0.3,
          borderColor: '#fff'
        }
      }]
    },
    onHeatMapUpdate (date) {
      this.curHeatMapData = this.data.filter(item => {
        return item.date === date
      })
      this.refreshStrengthChart()
    },
    refreshStrengthChart () {
      if (this.curHeatMapData.length === 0) {
        this.strengthChart.clear()
        return
      }
      let option = {
        backgroundColor: getTheme() === 'light' ? '#FFFFFF' : '#202940',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          containLabel: true,
          height: '80%',
          width: '95%',
          left: '0',
          top: '10%'
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          axisLabel: {
            textStyle: {
              color: getTheme() === 'light' ? '#666666' : '#B9BABF'
            }
          },
          axisTick: {
            lineStyle: {
              color: getTheme() === 'light' ? '#D7DFE1' : '#30384D'
            }
          },
          axisLine: {
            lineStyle: {
              color: getTheme() === 'light' ? '#D7DFE1' : '#30384D'
            }
          },
          splitLine: {// 去除网格线
            show: false
          }
        },
        yAxis: {
          type: 'category',
          axisTick: {
            lineStyle: {
              color: getTheme() === 'light' ? '#D7DFE1' : '#30384D'
            }
          },
          axisLine: {
            lineStyle: {
              color: getTheme() === 'light' ? '#D7DFE1' : '#30384D'
            }
          },
          splitLine: {
            lineStyle: {
              color: getTheme() === 'light' ? '#DCDFE6' : '#30384d'
            }
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: getTheme() === 'light' ? ['#fafafa', '#fff'] : ['#202940', '#1a2338']
            }
          },
          axisLabel: {
            textStyle: {
              color: getTheme() === 'light' ? '#666666' : '#B9BABF'
            }
          },
          data: this.getDetectorList(this.curHeatMapData).map(item => this.$t(`openatc.devicemanager.detector`) + item)
        },
        series: this.getStrengthSeries(this.curHeatMapData)
      }
      this.strengthChart.setOption(option)
    },
    getStrengthSeries (data) {
      let dataArr = data.map(item => {
        // return item.smallvehnum + 10
        return item.smallvehnum
      })
      let series = [
        {
          label: {
            show: true,
            position: 'right',
            color: getTheme() === 'light' ? '#666666' : '#B9BABF'
          },
          type: 'bar',
          itemStyle: {
            color: '#0874d4'
          },
          barWidth: '6',
          data: dataArr
        }
      ]
      return series
    },
    getMaxValueList () {
      let maxValueList = []
      let maxValue = this.maxValueList
      for (let index = 0; index < maxValue.length; ++index) {
        maxValueList.push({
          name: this.valueTypeList[index],
          max: maxValue[index]
        })
      }
      return maxValueList
    },
    GetData () {
      return new Promise((resolve, reject) => {
        let reqData = {}
        let from = moment(this.date[0]).format('YYYY-MM-DD HH:mm:ss')
        let to = moment(this.date[1]).format('YYYY-MM-DD HH:mm:ss')
        reqData = {
          agentId: this.curascid,
          beginTime: from,
          endTime: to
        }
        getAllTrafficData(reqData).then(res => {
          if (!res.data.success) {
            this.$message.error(getMessageByCode(res.data.code, this.$i18n.locale))
            reject(res.data.message)
          }
          let resInfo = res.data.data
          let resArr = []
          for (let item of resInfo) {
            let time = moment(item.time).format('MM-DD HH:mm:ss')
            let detectors = item.data.detector
            for (let dete of detectors) {
              let record = {
                time: time,
                date: time,
                id: dete.id,
                largevehnum: dete.largevehnum,
                middlevehnum: dete.middlevehnum,
                occupyrate: dete.occupyrate,
                smallvehnum: dete.smallvehnum,
                totalvehtime: dete.totalvehtime,
                greenusage: dete.greenusage
              }
              resArr.push(record)
            }
          }
          resolve(resArr)
        }).catch(() => {
          this.unlockScreen()
        })
      })
    }
  }
}
</script>
